<template>
    <div style="padding:.2rem">
        <header>
            <!--      <div class="back-icon" @click="goBack">-->
            <!--        <van-icon name="arrow-left" />-->
            <!--      </div>-->
            <!--      <b style="font-size:.8rem">搜索</b>-->
            <van-nav-bar title="搜索" left-text="返回" left-arrow @click-left="goBack"/>
        </header>
        <van-search placeholder="请输入搜索关键词" shape="round" @search="onSearch"></van-search>
        <div class="history-search">
            <div class="history-search-title">
                <b style="font-size:.65rem">历史搜索</b>
                <van-icon name="delete" @click="clearHistoryList"/>
            </div>
            <div class="history-search-list">
                <ul>
                    <li v-for="(item,inx) in historyList" :key="inx">
                        <van-tag round color="#F5F5F5" text-color="#898989" size="medium">{{item}}</van-tag>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
    import {Search, Icon, Tag, NavBar} from "vant";

    export default {
        components: {
            "van-search": Search,
            "van-icon": Icon,
            "van-tag": Tag,
            "van-nav-bar": NavBar,
        },
        methods: {
            goBack() {
                this.$router.back();
            },
            clearHistoryList() {
                this.historyList = [];
            },
            onSearch() {
                this.$router.push("/goods/search-list");
            }
        },
        data() {
            return {
                historyList: [
                    "海贼王",
                    "火影忍者",
                    "死神",
                    "名侦探柯南",
                    "西游记",
                    "狄仁杰之通天帝国",
                    "水浒传",
                    "西游记",
                    "三国演义"
                ]
            };
        }
    };
</script>
<style lang="less">
    header {
        padding: 0.2rem 0.2rem 0;
        text-align: center;
        position: relative;

        .back-icon {
            position: absolute;
        }
    }

    .history-search {
        padding: 0 0.2rem;

        .history-search-title {
            display: flex;
            justify-content: space-between;
        }

        .history-search-list {
            ul {
                display: flex;
                flex-wrap: wrap;
            }

            li {
                padding: 0.2rem;
            }
        }
    }
</style>
